1
00:00:00,560 --> 00:00:09,110
الآن دعونا نبدأ بالتعرف أكثر قليلاً على HTML، ما هي بالضبط؟ وكيف نستخدمها

2
00:00:09,110 --> 00:00:10,340
لإنشاء المواقع الإلكترونية؟

3
00:00:10,370 --> 00:00:18,050
الآن، بغض النظر عن المتصفح الذي تفضل استخدامه، سواء كان Chrome أو Safari أو Brave، فإن كل هذه التطبيقات

4
00:00:18,050 --> 00:00:19,230
تفعل الشيء نفسه.

5
00:00:19,250 --> 00:00:27,110
فهي تأخذ ملفات مختلفة مثل HTML و CSS و JavaScript، وتقوم بمعالجتها وتحويلها إلى موقع إلكتروني.

6
00:00:27,260 --> 00:00:34,100
ولكن على الرغم من أن معظم المواقع الحديثة يتم إنشاؤها باستخدام هذه الأنواع الثلاثة المختلفة من الملفات مجتمعة،

7
00:00:34,100 --> 00:00:39,540
إلا أنه لا يمكنك إنشاء موقع إلكتروني باستخدام ملف CSS فقط أو ملف JavaScript فقط.

8
00:00:39,560 --> 00:00:43,490
ومع ذلك، يمكنك الحصول على موقع باستخدام ملف HTML فقط.

9
00:00:43,490 --> 00:00:48,800
وفي الواقع، هذا هو بالضبط ما تم إنشاء المواقع الإلكترونية الأولى باستخدامه، وهو الـ HTML.

10
00:00:48,830 --> 00:00:53,390
الآن، تحدد الـ HTML محتوى وبنية الموقع الإلكتروني.

11
00:00:53,390 --> 00:01:00,960
على سبيل المثال في هذه الحالة، كل ما يفعله ملف HTML الخاص بي هو أنه يعرض عنواناً رئيسياً يقول "موقعي الإلكتروني".

12
00:01:00,990 --> 00:01:08,640
وعندما يفتح المتصفح هذا الملف، سيعرض هذا العنوان الذي يقول "موقعي الإلكتروني".

13
00:01:08,730 --> 00:01:11,490
الآن، ما هي HTML بالضبط؟

14
00:01:11,520 --> 00:01:12,690
دعونا نقوم بتفكيكها.

15
00:01:12,690 --> 00:01:16,950
ترمز HTML إلى "Hypertext Markup Language" (لغة توصيف النص التشعبي).

16
00:01:16,980 --> 00:01:20,940
إذا نظرنا إلى الجزء الأول، "النص التشعبي" (Hypertext)، فماذا يعني ذلك؟

17
00:01:21,420 --> 00:01:28,600
حسنًا، إنه يشير إلى نصوص يمكنها الارتباط بمستندات أخرى في الموقع الإلكتروني.

18
00:01:28,620 --> 00:01:37,830
هذه النصوص هي نصوص تشعبية أو روابط تشعبية، وهي الأساس الذي يقوم عليه عمل موقع الـ HTML.

19
00:01:37,830 --> 00:01:38,580
يعمل.

20
00:01:38,610 --> 00:01:46,560
الآن، إذا ألقينا نظرة على أول موقع إلكتروني في العالم والذي أنشأه السير تيم بيرنرز لي، وهو أيضاً

21
00:01:46,560 --> 00:01:52,040
مخترع الإنترنت، ستلاحظ أنه مليء بهذه الروابط التشعبية المميزة باللون الأزرق.

22
00:01:52,050 --> 00:01:54,600
وتماماً كما تتوقع،

23
00:01:54,600 --> 00:02:01,710
إذا قمت بالنقر فوق أي من هذه الروابط التشعبية، فسينقلك ذلك إلى مستند آخر، ملف HTML آخر.

24
00:02:01,740 --> 00:02:06,600
لذا إذا عدنا إلى الوراء، يمكنك أن ترى أننا كنا في Project.html.

25
00:02:06,600 --> 00:02:14,880
وإذا نقرت على أحد الروابط التشعبية مثل "كيف يمكنني المساعدة؟" (How can I help?) فسينقلي إلى ملف HTML آخر،

26
00:02:14,880 --> 00:02:16,650
وهذه هي طريقة عمل النص التشعبي.

27
00:02:16,650 --> 00:02:22,260
وهناك رابط على هذا الموقع يشرح بالضبط ما هو النص التشعبي.

28
00:02:22,290 --> 00:02:28,080
الآن بعد أن عرفنا ما هو النص التشعبي، ماذا عن الجزء الآخر، لغة التوصيف (Markup Language)؟

29
00:02:28,080 --> 00:02:29,910
ما هي لغة التوصيف؟

30
00:02:30,300 --> 00:02:36,870
الآن، إذا نظرت إلى اللغة الإنجليزية (أو أي لغة)، فغالباً ما نرى أجزاءً صغيرة تعمل بشكل مشابه جداً للتوصيف،

31
00:02:36,960 --> 00:02:38,970
مثل علامات الاقتباس المزدوجة هذه.

32
00:02:39,000 --> 00:02:45,690
إن وجود علامات الاقتباس هذه هو ما يخبر القارئ بأن هذا الجزء عبارة عن اقتباس.

33
00:02:45,690 --> 00:02:54,480
وكما ستلاحظ، فإن هذا سيكون مشابهاً جداً لما تراه في مراجعة المحرر للمخطوطات والكتب.

34
00:02:54,480 --> 00:03:01,830
حيث اعتادوا على وضع علامات عليها (توصيفها) لإظهار أشياء مختلفة، مثل، على سبيل المثال، أي الأجزاء يجب أن تكون بخط عريض

35
00:03:01,850 --> 00:03:09,830
عن طريق إضافة خط متموج تحتها، وأي الأجزاء يجب وضع خط تحتها بإضافة خط مستقيم

36
00:03:09,830 --> 00:03:10,490
عبرها.

37
00:03:11,060 --> 00:03:15,230
إذن كيف تقوم بالتوصيف باستخدام HTML؟

38
00:03:15,260 --> 00:03:19,670
حسنًا، يتم ذلك من خلال ما يسمى وسوم الـ HTML (HTML tags).

39
00:03:19,700 --> 00:03:25,040
الآن، في الأيام الأولى للإنترنت، لم يكن هناك سوى عدد قليل جداً من وسوم HTML.

40
00:03:25,160 --> 00:03:31,310
في هذه الأيام هناك الكثير والكثير، ولكن واقعياً، ستستخدم فقط بعضاً من الوسوم الأكثر

41
00:03:31,310 --> 00:03:38,700
أهمية مثل العناوين الرئيسية، من H1 إلى H6، أو وسم الفقرة، وهو الوسم P.

42
00:03:38,720 --> 00:03:44,570
هنا يمكنك رؤية جميع وسوم الـ HTML، ولكن عندما نحصرها في تلك التي تحتاج إلى معرفتها بالفعل،

43
00:03:44,570 --> 00:03:47,810
فإن ذلك يجعل الأمر أسهل بكثير وفهمها متاحاً بشكل أكبر.

44
00:03:47,930 --> 00:03:52,610
وفي بقية هذه الدورة التعليمية، سنقوم بتغطية بعض من أهم هذه الوسوم الأساسية،

45
00:03:52,610 --> 00:03:55,400
لذا لا تقلق بشأن تعلمها [كلها مرة واحدة].

46
00:03:55,400 --> 00:03:58,950
لذا لا تقلق بشأن حفظها جميعاً أو تعلمها [دفعة واحدة].

47
00:03:58,970 --> 00:04:03,690
سوف نقوم بتغطيتها كلما احتجنا إليها في مشاريعنا وتماريننا.

48
00:04:03,870 --> 00:04:11,610
لذا في الدرس القادم، سوف نبدأ بالتعرف على وسم العنوان الرئيسي (heading tag)، وهو واحد من أعرق

49
00:04:11,640 --> 00:04:14,940
وسوم الـ HTML الأصلية (OG) التي وجدت على الإطلاق.

50
00:04:14,940 --> 00:04:18,360
لكل هذا وأكثر، أراكم في الدرس القادم.